<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<script>
  // 常量路由：所有用户都可以访问到的路由
  let constantRoute = [
    {
      // 登录
      path: "/login",
      component: () => import("@/views/login/index.vue"),
      name: "login", // 命名路由
      meta: {
        title: "登录", // 菜单标题
        hidden: true, //代表路由的标题在菜单中是否隐藏，true：隐藏 false：不隐藏
        icon: "Promotion", // 菜单文字左侧的图标，支持element-plus全部图标
      },
    },
    {
      // 登录成功以后展示数据的路由
      path: "/",
      component: () => import("@/layout/index.vue"),
      name: "layout",
      meta: {
        title: "",
        hidden: false,
        icon: "",
      },
      redirect: "/home",
      children: [
        {
          path: "/home",
          component: () => import("@/views/home/index.vue"),
          name: "home",
          meta: {
            title: "首页",
            hidden: false,
            icon: "HomeFilled",
          },
        },
      ],
    },
    {
      // 404
      path: "/404",
      component: () => import("@/views/404/index.vue"),
      name: "404",
      meta: {
        title: "404",
        hidden: true,
        icon: "CloseBold",
      },
    },
    {
      // 数据大屏
      path: "/screen",
      component: () => import("@/views/screen/index.vue"),
      name: "Screen",
      meta: {
        title: "数据大屏",
        hidden: false,
        icon: "DataLine",
      },
    },
  ];
  // 异步路由：有的人有，有的人没有
  let asyncRoute = [
    {
      // 权限管理
      path: "/acl",
      component: () => import("@/layout/index.vue"),
      name: "Acl",
      meta: {
        title: "权限管理",
        hidden: false,
        icon: "Lock",
      },
      redirect: "/acl/user",
      children: [
        {
          path: "/acl/user",
          component: () => import("@/views/acl/user/index.vue"),
          name: "User",
          meta: {
            title: "用户管理",
            hidden: false,
            icon: "User",
          },
        },
        {
          path: "/acl/role",
          component: () => import("@/views/acl/role/index.vue"),
          name: "Role",
          meta: {
            title: "角色管理",
            hidden: false,
            icon: "UserFilled",
          },
        },
        {
          path: "/acl/permission",
          component: () => import("@/views/acl/permission/index.vue"),
          name: "Permission",
          meta: {
            title: "菜单管理",
            hidden: false,
            icon: "Monitor",
          },
        },
      ],
    },
    {
      // 商品管理
      path: "/product",
      component: () => import("@/layout/index.vue"),
      name: "Product",
      meta: {
        title: "商品管理",
        hidden: false,
        icon: "Goods",
      },
      redirect: "/product/trademark",
      children: [
        {
          path: "/product/trademark",
          component: () => import("@/views/product/trademark/index.vue"),
          name: "Trademark",
          meta: {
            title: "品牌管理",
            hidden: false,
            icon: "ShoppingCartFull",
          },
        },
        {
          path: "/product/attr",
          component: () => import("@/views/product/attr/index.vue"),
          name: "Attr",
          meta: {
            title: "属性管理",
            hidden: false,
            icon: "ChromeFilled",
          },
        },
        {
          path: "/product/spu",
          component: () => import("@/views/product/spu/index.vue"),
          name: "Spu",
          meta: {
            title: "SPU管理",
            hidden: false,
            icon: "Grid",
          },
        },
        {
          path: "/product/sku",
          component: () => import("@/views/product/sku/index.vue"),
          name: "Sku",
          meta: {
            title: "SKU管理",
            hidden: false,
            icon: "Orange",
          },
        },
      ],
    },
  ];
  // 任意路由
  let anyRoute = [
    {
      // path: '/:pathMatch(.*)*' 是一个特殊的路由配置，它可以用于捕获任意路径并进行路由重定向
      // path: '/:pathMatch(.*)*' 中的 path 表示该路由的路径，这里是 /，意味着它匹配根路径
      // :pathMatch(.*)* 是一个动态片段，它使用了路由参数（以冒号 : 开头），其中 pathMatch 是参数的名称，而 (.*)* 是参数的正则表达式模式
      // (.*) 是一个正则表达式，它匹配任意字符（零次或多次）。这意味着它可以捕获任何路径片段
      // * 表示捕获的路径片段可以重复零次或多次。这允许我们捕获整个路径
      path: "/:pathMach(.*)*",
      redirect: "/404",
      name: "Any",
      meta: {
        title: "任意路由",
        hidden: true,
        icon: "Finished",
      },
    },
  ];

  // 硅谷333：routes['Product','Trademark','Sku']
  let guigu33 = ["Product", "Trademark", "Sku"];
  function filterAsync(asyncRoute, routes) {
    return asyncRoute.filter((item) => {
      if (routes.includes(item.name)) {
        if (item.children && item.children.length > 0) {
          item.children = filterAsync(item.children, routes);
        }
        return true;
      }
    });
  }
  let result = filterAsync(asyncRoute, guigu33);
  console.log(asyncRoute, result, "333333");

  // 第二个人登录:对比的异步路由发生变化。所有需要深拷贝
  let guigu44 = ["Product", "Spu"];
  console.log(asyncRoute);
</script>
